前言

前一篇文章介紹 rest/spread operator 應用於陣列的方法，那是不是也可以應用在物件上呢？當然可以！但在 ES6 中其實只支援陣列的 rest/spread operator，而物件的 rest/spread operator 則是在 ES7 才開始支援。不過在之後使用 React 時，透過 create-react-app 建立的開發環境除了支援 ES6 語法，也同時支援物件的 rest/spread operator，因此還是會在本篇文章中來和大家介紹囉！

rest operator 應用於物件

我們重新複習一下物件的 destructurig assignment：

const skills = {
  frontend: 'reactjs',
  backend: 'nodejs',
  database: 'mongodb',
  analysis: 'python',
}

const { frontend, backend } = skills;
// frontend 為 'reactjs'
// backend 為 'nodejs'

透過 destructuring assignment 可以取得物件中與變數名稱相同的屬性，其餘的屬性就會被忽略掉，但我們可以利用其餘運算子(...)來取得其餘的屬性：

const skills = {
  frontend: 'reactjs',
  backend: 'nodejs',
  database: 'mongodb',
  analysis: 'python',
}

const { frontend, backend, ...otherSkills } = skills;
// frontend 為 'reactjs'
// backend 為 'nodejs'
// otherSkills 為 
// {
//   database: 'mongodb',
//   analysis: 'python'
// }

以上例子中，我們多宣告一個變數 otherSkills 放在最後一個位置，然後在前面加上 ...，如此一來其餘的屬性就會組成一個新的物件並且賦值給該物件。

要特別注意：和應用於陣列一樣，其餘運算子只能放在最後一個位置，不然也會出現錯誤：

const skills = {
  frontend: 'reactjs',
  backend: 'nodejs',
  database: 'mongodb',
  analysis: 'python'
}

const { ...otherSkills, analysis } = skills;  // SyntaxError: Rest element must be last element

使用 rest operator 來複製物件

我們可以利用 rest operator 的特性來複製物件：

const skills = {
  frontend: 'reactjs',
  backend: 'nodejs',
  database: 'mongodb'
}

const { ...newSkills } = skills;
// newSkills 同為
// {
//   frontend: 'reactjs',
//   backend: 'nodejs',
//   database: 'mongodb'
// }

相當於將 skills 中的所有屬性重新組成一個新的物件賦值給 newSkills。

spread operator 應用於物件

展開運算子(...)使用於物件的方式也和使用於陣列類似：

const someSkills = {
  frontend: 'reactjs',
  backend: 'nodejs',
  database: 'mongodb'
}

const skills1 = { mobile: 'Swift', ...someSkills };
const skills2 = { ...someSkills, mobile: 'Swift' };
// skills1, skills2 同為
// {
//   frontend: 'reactjs',
//   backend: 'nodejs',
//   database: 'mongodb',
//   mobile: 'Swift'
// }
// 物件的屬性是沒有順序的喔！

以上例子中，我們在變數 someSkills 前面加上 ... 就能將物件中的屬性展開放到另外一個物件裡面。

使用 spread operator 來複製物件

我們同樣可以利用 spread operator 的特性來複製陣列：

const skills = {
  frontend: 'reactjs',
  backend: 'nodejs',
  database: 'mongodb'
}

const newSkills = { ...skills };
// newSkills 同為
// {
//   frontend: 'reactjs',
//   backend: 'nodejs',
//   database: 'mongodb'
// }

使用 spread operator 來合併物件

我們還可以利用 spread operator 的特性來合併物件：

const skills = {
  frontend: 'reactjs',
  backend: 'nodejs'
}

const newSkills = {
  backend: 'php',
  database: 'mysql'
};

const finalSkills = { ...skills, ...newSkills };
// finalSkills 為
{
  frontend: 'reactjs',
  backend: 'php',
  database: 'mysql'
}

要特別注意：如果有相同的屬性名稱，後面的屬性值會覆蓋掉前面的屬性值。像是在以上的例子中，skills 和 newSkills 都具有相同的屬性名稱 backend，而由於 newSkills 在 skills 的後面，所以屬性值 'php' 就會覆蓋掉 'nodejs'。

總結

rest/spread operator 搭配 destructuring assignment 可以使用於陣列，也能夠使用於物件來取得其餘屬性或是將物件展開。到目前為止介紹了 ES6 中最常使用來操作陣列和物件的語法 - destructuring assignment 和 rest/spread operator，其實 ES6 還包含其他有關陣列和物件的語法，可以在 es6-features.org 裡面找到，但因為實務上比較不常使用，所以就不在本系列文章中介紹，留給讀者們自行探索吧！